﻿@page "/pivot-table/label-filtering"

@using Syncfusion.Blazor.PivotView
@inherits SampleBaseComponent;
@using BlazorDemos
@using ej2_blazor_productdetails

<SampleDescription>
   <p>This sample demonstrates filtering row and column headers based on their text. The different conditions that can be applied to the text are equals, begins with, ends with, contains, etc.</p> 
</SampleDescription>
<ActionDescription>
   <p>Label filtering can be applied either through code-behind or UI. To achieve this in code-behind, set the <code>AllowLabelFilter</code> property in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html'>PivotViewDataSourceSettings</a></code> class to <b>true</b> and use the
    <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html'>PivotViewFilterSetting</a></code> class in the pivot table along with the following properties.</p>
    <table>
        <tr>
            <td style='vertical-align: top;padding: 10px 0;width:100px'><code>Name :</code> </td>
            <td>Specifies the normal field.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Type :</code> </td>
            <td>Specifies the filter type and it should be 'Label' in this scenario.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'><code>Condition :</code> </td>
            <td>Specifies the operator type like equals, greater than, less than, etc.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'> <code>Value1 :</code> </td>
            <td>Gets the value to view the filter result.</td>
        </tr>
        <tr>
            <td style='vertical-align: top;padding: 4px 0;'>  <code>Value2 :</code></td>
            <td>For conditions like &#34;between&#34; and &#34;not between&#34;, this option will be enabled. Enter both start and end value to view the filter result.</td>
        </tr>
    </table>
    <br/>
    <p>

    In this sample, we have applied the label filter for the field <b>Country</b> by showing the fields that are not equal to <b>Canada</b> in code behind.</p>

     <p>To achieve the same through UI, either enable grouping bar or field list or both to perform the filtering operation.</p>
<p>More information on the label filtering feature can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/pivot-table/filtering/#label-filtering'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div class="content-wrapper">
        <SfPivotView TValue="PivotProductDetails" Height="400" Width="100%" ShowGroupingBar=true EnableValueSorting=true ShowTooltip=false>
            <PivotViewDataSourceSettings DataSource="@Data" ExpandAll=false EnableSorting=true AllowLabelFilter=true AllowMemberFilter=false>
                <PivotViewColumns>
                    <PivotViewColumn Name="Year"></PivotViewColumn>
                </PivotViewColumns>
                <PivotViewRows>
                    <PivotViewRow Name="Country"></PivotViewRow>
                    <PivotViewRow Name="Products"></PivotViewRow>
                </PivotViewRows>
                <PivotViewValues>
                    <PivotViewValue Name="In_Stock" Caption="In Stock"></PivotViewValue>
                    <PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
                    <PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
                </PivotViewValues>
                <PivotViewFilters>
                    <PivotViewFilter Name="Product_Categories" Caption="Product Categories"></PivotViewFilter>
                </PivotViewFilters>
                <PivotViewFilterSettings>
                    <PivotViewFilterSetting Name="Year" Type="Syncfusion.Blazor.PivotView.FilterType.Label" Condition="Operators.DoesNotEquals" Value1="FY 2015"></PivotViewFilterSetting>
                    <PivotViewFilterSetting Name="Country" Type="Syncfusion.Blazor.PivotView.FilterType.Label" Condition="Operators.DoesNotEquals" Value1="Canada"></PivotViewFilterSetting>
                </PivotViewFilterSettings>
                <PivotViewFormatSettings>
                    <PivotViewFormatSetting Name="Amount" Format="C0" UseGrouping=true></PivotViewFormatSetting>
                </PivotViewFormatSettings>
            </PivotViewDataSourceSettings>
            <PivotViewGridSettings ColumnWidth="120"></PivotViewGridSettings>
        </SfPivotView>
    </div>
</div>

<style>
    .e-pivotview {
        min-height: 200px;
    }
</style>

@code{

    public List<PivotProductDetails> Data { get; set; }

    protected override void OnInitialized()
    {
        this.Data = PivotProductDetails.GetProductData();
    }

}